<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: #f7f7f7;
      }

      h3 {
        text-align: center;
      }

      .chatbox {
        width: 500px;
        height: 500px;
        margin: 0 auto;
        border: 1px solid #ccc;
        background-color: #fff;
        border-radius: 5px;
      }

      .messages {
        height: 350px;
        padding: 20px 40px;
        box-sizing: border-box;
        border-bottom: 1px solid #ccc;
        overflow: scroll;
      }

      .messages h5 {
        font-size: 20px;
        margin: 10px 0;
      }

      .messages p {
        font-size: 18px;
        margin: 0;
      }

      .self {
        text-align: right;
      }

      .other {
        text-align: left;
      }

      .form {
        height: 150px;
      }

      .form .input {
        height: 110px;
        padding: 10px;
        box-sizing: border-box;
      }

      .form .btn {
        height: 40px;
        box-sizing: border-box;
        border-top: 1px solid #ccc;
      }

      .form textarea {
        display: block;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border: none;
        resize: none;
        outline: none;
        font-size: 20px;
      }

      .form input {
        display: block;
        width: 100px;
        height: 30px;
        margin-top: 5px;
        margin-right: 20px;
        float: right;
      }
    </style>
  </head>
  <body>
    <!-- <form action="" enctype="application/x-www-form-urlencoded"></form> -->
    <h3>高级智能机器人</h3>
    <div class="chatbox">
      <!-- 聊天内容 -->
      <div class="messages">
        <div class="self">
          <h5>我说</h5>
          <p>你好</p>
        </div>
        <div class="other">
          <h5>对方说</h5>
          <p>你好</p>
        </div>
      </div>
      <div class="form">
        <div class="input">
          <textarea></textarea>
        </div>
        <div class="btn">
          <input type="button" value="发送" id="btn" />
        </div>
      </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      $("#btn").on("click", function () {
        /*
          1获取数据  2 连接图灵  3渲染数据
           */
        const value = $("textarea").val().trim();
        if (!value) return;
        //  console.log(value);
        const $self = $(`<div class="self"><h5>我说</h5><p>${value}</p></div>`);
        $(".messages").append($self);
        $self[0].scrollIntoView();
        $("textarea").val("");
        $.ajax({
          url: "http://www.tuling123.com/openapi/api",
          type: "post",
          data: {
            key: "51f1d94f18c54c3c8b2555119f59a937",
            info: value,
            userid: 335220,
          },
          dataType: "json",
          success: function (data) {
            // console.log(data);
            const $maleGodSay = $(
              `<div class="other"><h5>他说</h5><p>${data.text}</p></div>`
            );
            $(".messages").append($maleGodSay);
            $maleGodSay[0].scrollIntoView();
          },
        });
      });
    </script>
  </body>
</html>
